Ext.onReady(function() {
	ExtBIND.login = function() {
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';
		
		var password = new Ext.ux.PasswordField({
			showCapsWarning: true,
			showStrengthMeter: false,
			fieldLabel: 'Password',
			name: 'password',
			width: 160
		});
		
		var fp = new Ext.form.FormPanel({
			id: 'loginForm',
			frame: true,
			labelWidth: 80,
			waitMsgTarget: true,
			autoHeight:true,
			autoWidth: true,
			
			// configure how to read the XML Data
			reader : new Ext.data.XmlReader({
				record : 'credentials',
				success: '@success'
			}, [
				{name: 'username', mapping: 'username'},
				{name: 'password', mapping: 'password'}
			]),
			errorReader: new Ext.form.XmlErrorReader(),
			buttonAlign: 'right',
			defaultType: 'textfield',
			items: [{
					fieldLabel: 'Username',
					name: 'username',
					width: 160
					
				}, password
			]
		});
		
		var submit = fp.addButton({
			text: 'Login',
			disabled: true,
			handler: function() {
				fp.getForm().submit({
					url: 'xhr/login/validate.php', 
					waitMsg: 'Processing...',
					success: function(form, action) {
						// redirect to home page
						window.location.replace('index.php');
					}
				});
			}
		});
		
		fp.on({
			actioncomplete: function(form, action) {
				if(action.type == 'load') {
					submit.enable();
					// fix shadow
					win.syncShadow();
				}
			}
		});
		
		var graphic = new Ext.Panel({
			width: 500,
			height: 200,
			id: 'loginGraphic'
		});
		
		var win = new Ext.Window({
			title: 'Login',
			iconCls: 'login-icon',
			closable: false,
			items: [graphic, fp],
			autoHeight:true,
			autoWidth: true
		});
		
		return {
			// public methods
			init: function() {
				win.show();
				// load form
				fp.getForm().load({url: '/xhr/login/form.xml', waitMsg: 'Loading...'});
			}
		};
	}(); // end login
	
	// initialize application
	ExtBIND.login.init();
});